<template>
    <vab-icon
        v-if="theme.showRefresh"
        icon="refresh-line"
        @click="refreshRoute"
    />
</template>

<script lang="ts">
import Vue from "vue";
import {Component} from 'vue-property-decorator';
import {SettingsGetterEnum, TabsGetterEnum} from '@/store/enum/store.enum'

@Component({})
export default class VabRefresh extends Vue {
    get theme() {
        return this.$store.getters[SettingsGetterEnum.theme]
    };

    get extra() {
        return this.$store.getters[SettingsGetterEnum.theme]
    };

    get visitedRoutes() {
        return this.$store.getters[TabsGetterEnum.visitedRoutes]
    };

    private async refreshRoute() {
        const currentRoute = this.$route;
        const parentRouteName = currentRoute.matched.slice(0, -1).map((item) => item.name).join(',');
        const otherRoutes = this.visitedRoutes.filter((item) => {
            return item.name !== currentRoute.name;
        });
        if (otherRoutes.length) {
            let transferRoute = otherRoutes.find((item) => {
                return item.matched.slice(0, -1).join(',') === parentRouteName;
            })
            if (!transferRoute) {
                transferRoute = otherRoutes[0];
            }
            this.extra.transferRouteName = currentRoute.name;
            this.$router.replace(transferRoute).then(() => {
                this.extra.transferRouteName = '';
                this.$router.replace(currentRoute);
            })
        } else {
            this.$bus.$emit('reload-router-view');
        }
    };

}
</script>
